<template>
  <div class="assy">
    <div class="assy-inner">
      <div class="assy-item" @click="switchTab('dzhp')">
        <span :class="{ active: isActive1, 'assy-item-title': isActive }">地震滑坡</span>
      </div>
      <div class="assy-item"  @click="switchTab('styh')">
        <span :class="{ active: isActive2, 'assy-item-title': isActive }">砂土液化</span>
      </div>
      <div class="assy-item" @click="switchTab('rtzx')">
        <span :class="{ active: isActive3, 'assy-item-title': isActive }">软土震陷</span>
      </div>
    </div>

    <!--<div class="assy-panel">-->
    <div id="myPieChart"></div>
    <!--</div>-->
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import styhPie from "@/assets/images/dzzh/styh_pie.png"
import dzhpPie from "@/assets/images/dzzh/dzhp_pie.png"
import rtzxPie from "@/assets/images/dzzh/rtzx_pie.png"

const props = defineProps({
  datas: {
    default: {},
    type: Object,
  },
});
const emit = defineEmits(['titleClickVal']);
const isActive = ref(true);
const isActive1 = ref(true);
const isActive2 = ref(false);
const isActive3 = ref(false);
const imgUrl = ref('');
imgUrl.value = styhPie
const { datas } = toRefs(props);
      const arrOne=datas.value[0]
      const arrTwo=datas.value[1]
      const arrThree=datas.value[2]
onMounted(() => {
  // 需要获取到element,所以是onMounted的Hook
  watch(
    () => props.datas,
    () => {
     
      ////  datas.value.reportNum = String(datas.value.reportNum).padStart(6, '0')
      ////  datas.value.mapNum = String(datas.value.mapNum).padStart(6, '0')
      ////  datas.value.keyLocationsNum = String(datas.value.keyLocationsNum).padStart(6, '0')
      let color = ['#EF2F2F', '#FFA741', '#A6D839', '#46FFFF', '#E545F0'];
      let data = [
        { value: arrTwo.poleHighProportion, name: '极高危险' },

        { value: arrTwo.lowProportion, name: '低危险' },

        { value: arrTwo.centreProportion, name: '中危险' },
        { value: arrTwo.highProportion, name: '高危险' },

        { value: arrTwo.poleLowProportion, name: '极低危险' },
      ];
      nextTick(() => {
        createEcharts(color, data);
      });
    },
    { deep: true, immediate: true }
  );
});
const switchTab = (val) => {
  if (val == 'dzhp') {
    emit('titleClickVal', '地震滑坡');
    isActive1.value = true;
    isActive2.value = false;
    isActive3.value = false;
    imgUrl.value = dzhpPie;
    let color = ['#EF2F2F', '#FFA741', '#A6D839', '#46FFFF', '#E545F0'];
    let data = [
      { value: arrOne.poleHighProportion, name: '极高危险' },
      { value:  arrOne.highProportion, name: '高危险' },
      { value:  arrOne.centreProportion, name: '中危险' },
      { value:  arrOne.lowProportion, name: '低危险' },
      { value:  arrOne.poleLowProportion, name: '极低危险' },
    ];
    nextTick(() => {
      createEcharts(color, data);
    });
  } else if (val == 'styh') {
    emit('titleClickVal', '砂土液化');
    isActive1.value = false;
    isActive2.value = true;
    isActive3.value = false;
    imgUrl.value = styhPie;
    let color = ['#EF2F2F', '#FFA741', '#A6D839', '#46FFFF', '#E545F0'];
    let data = [
    { value: arrTwo.poleHighProportion, name: '极高危险' },
      { value:  arrTwo.highProportion, name: '高危险' },
      { value:  arrTwo.centreProportion, name: '中危险' },
      { value:  arrTwo.lowProportion, name: '低危险' },
      { value:  arrTwo.poleLowProportion, name: '极低危险' },
    ];
    nextTick(() => {
      createEcharts(color, data);
    });
  } else if (val == 'rtzx') {
    emit('titleClickVal', '软土震陷');
    isActive1.value = false;
    isActive2.value = false;
    isActive3.value = true;
    imgUrl.value = rtzxPie;
    let color = ['#46FFFF', '#FFA741'];
    let data = [
      { value: arrThree.yesProportion, name: '震陷' },
      { value: arrThree.noProportion, name: '不震陷' },
    ];
    nextTick(() => {
      createEcharts(color, data);
    });
  }
};
const createEcharts = (color, data) => {
  echarts.init(document.getElementById('myPieChart')).dispose();
  let myChart = echarts.init(document.getElementById('myPieChart'));
  // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: 'item',
    },
    grid: {
      left: '0%', // 设置图在左侧留白
      right: '4%', // 设置图在右侧留白
      bottom: '4%',
      containLabel: false, // 包含坐标轴标签在内
    },
    // legend: {
    //   orient: 'vertical', // 设置图例垂直排列
    //   right: '0px', // 设置图例在右侧
    //   top: 'center', // 设置图例在垂直方向上居中
    //   itemGap: 50,
    //   textStyle: {
    //     color: '#fff',
    //     // padding: [0, 4], //文字与图形之间的左右间距
    //   },
    //   itemWidth: 10, // 设置图例项的宽度为10像素
    //   itemHeight: 10, // 设置图例项的高度为10像素
    // },
    legend: {
	    orient: 'vertical',  // 设置图例垂直排列
	    right: '30px',         // 设置图例在右侧
	    top: 'center',        // 设置图例在垂直方向上居中
	    textStyle: {
        color: "#fff",
        padding:[0,4]//文字与图形之间的左右间距
      },
      itemWidth: 10,    // 设置图例项的宽度为10像素
		  itemHeight: 10    // 设置图例项的高度为10像素
	  },
    color: color, // 设置饼状图的颜色
    graphic: {
      elements: [
        {
          type: 'image',
          style: {
            image: imgUrl.value,
            width: 90,
            height: 90,
          },
          left: '25%',
          top: 'center',
        },
      ],
    },
    series: [
      {
        name: '砂土液化',
        type: 'pie',
        radius: ['50%', '60%'],
        center: ['35%', '50%'], // 设置饼状图的中心位置，向右移动一定的距离
        //avoidLabelOverlap: false,

        label: {
          //		      show: false,
          //		      position: 'center'
        },
        emphasis: {
          label: {},
        },
        labelLine: {
          show: false,
        },
        data: data,
        itemStyle: {
          normal: {
            borderRadius: 10, // 设置圆角大小
            borderColor: '#transparent',
            borderWidth: 2,
          },
        },
        label: {
          show: true,
          color: '#ffffff', // 设置标签颜色
        },
      },
    ],
  });
  window.addEventListener('resize', resize)
};

const resize = () => {
  let myChart = echarts.init(document.getElementById("myPieChart"));
  myChart.resize()
}
onBeforeUnmount(() => {
  window.removeEventListener('resize', resize)
})
</script>
<style lang="scss" scoped>
.assy {
  color: #fff;
  .assy-inner {
    display: flex;
    flex-wrap: wrap;

    justify-content: center;
    align-items: center;
  }
  #myPieChart {
    width: 450px;
    height: 190px;
    font-size: 14px;
    margin-top: -20px;
  }
  .dashed-border {
    width: 430px;
    border: 1px dashed #475adb;
    margin-left: 10px;
    margin-bottom: 10px;
  }
  &-item {
    width: 80px;
    height: 30px;
    background-size: 100% 100%;
    background-image: url(/src/assets/images/dzzh/bg1.png);
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    line-height: 29px;
    &:nth-child(2) {
      margin-left: 20px;
      margin-right: 20px;
    }
    span {
      display: block;
      color: #418dfd;
    }
    .active {
      color: #ffffff;
      background-size: 100% 100%;
      background-image: url(/src/assets/images/dzzh/bg2.png);
    }
    &-title {
      display: inline-block;
      width: 100%;
      color: #46ffff;
      font-size: 14px;
      text-align: center;
    }
  }
  .assy-bottom {
    display: flex;
    height: 60px;
    position: relative;
    &-title {
      width: 80px;
      height: 16px;
      font-size: 16px;
      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      position: absolute;
      left: 15px;
    }
    &-image {
      position: absolute;
      left: 24px;
      top: 24px;
    }
    &-area {
      width: 300px;
      height: 45px;
      background: rgba(0, 0, 0, 0.25);
      position: absolute;
      left: 135px;
      top: 40px;
      .word_1 {
        position: absolute;
        top: 12px;
        left: 20px;
        font-size: 16px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #e4f5ff;
      }
      .word_2 {
        position: absolute;
        top: 7px;
        left: 217px;
        font-size: 24px;
        font-family: Helvetica Neue LT Pro-65 Medium, Helvetica Neue LT Pro;
        font-weight: normal;
        color: #46ffff;
      }
      .word_3 {
        position: absolute;
        top: 12px;
        right: 10px;
        font-size: 16px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #e4f5ff;
      }
    }
  }
}
</style>
